<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>尹志辉的个人博客</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./statics/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./statics/jquery/jquery.min-1.72.js">
    </script>
    <style>

    </style>
    <script>
        $(function() {
            // $('#hamburger').toggle(function() {
            //     $('#nav-stacked').slideDown();
            // }, function() {
            //     $('#nav-stacked').slideUp();
            // });
            $('#hamburger').click(function() {
                $('#nav-stacked').slideToggle('slow');
            })
        })
    </script>
</head>

<body>

    <header class="container">
        <div id="logo" class="row">
            <h2 class="text-primary col-xs-5">My Blog</h2>
            <h2 class="text-primary col-xs-2 col-xs-offset-5 visible-xs-block">
                <button id="hamburger" class="btn-link"><i class="glyphicon glyphicon-menu-hamburger"></i></button>
            </h2>
        </div>
        <div id="navbar" class="row">
            <ul class="nav nav-pills hidden-xs">
                <li><a href="#"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
                <li><a href="./blog/blog.html"><i class="glyphicon glyphicon-file"></i> 文章</a></li>
                <li><a href="./learning/learning.html"><i class="glyphicon glyphicon-book"></i> 学习</a></li>
                <li><a href="./demo/demo.html"><i class="glyphicon glyphicon-briefcase"></i> demo</a></li>
                <li><a href="./comment/comment.html"><i class="glyphicon glyphicon-edit"></i> 留言</a></li>
            </ul>
            <ul class="nav nav-pills nav-stacked hide-all" id="nav-stacked">
                <li><a href="#"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
                <li><a href="./blog/blog.html"><i class="glyphicon glyphicon-file"></i> 文章</a></li>
                <li><a href="./learning/learning.html"><i class="glyphicon glyphicon-book"></i> 学习</a></li>
                <li><a href="./demo/demo.html"><i class="glyphicon glyphicon-briefcase"></i> demo</a></li>
                <li><a href="./comment/comment.html"><i class="glyphicon glyphicon-edit"></i> 留言</a></li>
            </ul>
        </div>
    </header>
    <main id="main" class="container">
        <h4 class="text-primary">文章推荐</h4>
        <div class="row">
            <div id="section" class="col-md-8 col-sm-12 col-xs-12">
                <div class="articles">
                    <article class="">
                        <div class="header">
                            <h4>标题</h4>
                            <p>发布时间：2017-7-25 &nbsp;&nbsp;&nbsp;&nbsp;作者： <a href="">尹志辉</a> &nbsp;&nbsp;&nbsp;&nbsp;分类:<a href="">文章</a></p>
                        </div>
                        <div class="">
                            <div class="thumbnail">
                                <div class="img">
                                    <img src="./images/2.jpg" alt="...">
                                </div>
                                <div class="caption">
                                    <p>This is Timeless , a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The picture in this template is from PDPhoto.org. This free template is released under a Creative Commons Attributions
                                        2.5 license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) Sed lacus. Donec lectus.
                                        Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus
                                        turpis, cursus egestas at sem.</p>
                                    <p class="text-right"><a href="./blog/blogdetails.html" class="btn btn-link" role="button">阅读全文</a> | <a href="#" class="btn btn-link" role="button">评论</a></p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="">
                        <div class="header">
                            <h4>标题</h4>
                            <p>发布时间：2017-7-25 &nbsp;&nbsp;&nbsp;&nbsp;作者： <a href="">尹志辉</a> &nbsp;&nbsp;&nbsp;&nbsp;分类:<a href="">文章</a></p>
                        </div>
                        <div class="">
                            <div class="thumbnail">
                                <div class="img">
                                    <img src="./images/3.jpg" alt="...">
                                </div>
                                <div class="caption">
                                    <p>This is Timeless , a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The picture in this template is from PDPhoto.org. This free template is released under a Creative Commons Attributions
                                        2.5 license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) Sed lacus. Donec lectus.
                                        Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus
                                        turpis, cursus egestas at sem.</p>
                                    <p class="text-right"><a href="./blog/blogdetails.html" class="btn btn-link" role="button">阅读全文</a> | <a href="#" class="btn btn-link" role="button">评论</a></p>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="">
                        <div class="header">
                            <h4>标题</h4>
                            <p>发布时间：2017-7-25 &nbsp;&nbsp;&nbsp;&nbsp;作者： <a href="">尹志辉</a> &nbsp;&nbsp;&nbsp;&nbsp;分类:<a href="">文章</a></p>
                        </div>
                        <div class="">
                            <div class="thumbnail">
                                <div class="img">
                                    <img src="./images/1.jpg" alt="...">
                                </div>
                                <div class="caption">
                                    <p>This is Timeless , a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The picture in this template is from PDPhoto.org. This free template is released under a Creative Commons Attributions
                                        2.5 license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) Sed lacus. Donec lectus.
                                        Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus
                                        turpis, cursus egestas at sem.</p>
                                    <p class="text-right"><a href="./blog/blogdetails.html" class="btn btn-link" role="button">阅读全文</a> | <a href="#" class="btn btn-link" role="button">评论</a></p>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="text-center">
                    <button class="btn btn-link" type="button">Load More</button>
                    <br>
                    <br>
                    <a href="#" class="btn btn-link">Top</a>

                </div>
            </div>
            <div id="slide" class="col-md-3 col-md-offset-1  hidden-xs">
                <ul>
                    <li class="input-group">
                        <input type="search" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">Go!</button>
                        </span>
                    </li>
                    <li>
                        <h3 class="text-primary"><i class="glyphicon glyphicon-th-large"></i> 分类导航</h3>
                        <p><span><a href="">文章</a></span>&nbsp;<span><a href="">学习</a></span>&nbsp;<span><a href="">demo</a></span>&nbsp;<span><a href="">留言</a></span></p>
                    </li>
                    <li>
                        <h3 class="text-primary"><i class="glyphicon glyphicon-duplicate"></i> 最新文章</h3>
                        <ul class="list">
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 class="text-primary"><i class="glyphicon glyphicon-star"></i> 热门点击</h3>
                        <ul class="list">
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 class="text-primary"><i class="glyphicon glyphicon-tags"></i> 标签</h3>
                        <ul class="list">
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                            <li><a href="">This is just for testing</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <footer class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="author">
                    Design by yinzhihui <a href="http://www.miitbeian.gov.cn/">深ICP备11002373号-1</a>
                </p>
            </div>
        </div>
    </footer>
</body>

</html>